<template>
    <view>
        <view class="order-details">
            <view class="header-bg"></view>
            <view class="main">
                <view class="header">
                    <view class="item" v-if="orderDetail.order_status == 0">
                        <view class="white lg m-b-10" v-if="orderDetail.pay_way_base != 4"
                            >等待买家付款</view
                        >
                        <view class="white lg m-b-10" v-else>等待商家处理，请耐心等待</view>

                        <view class="white sm flex" v-if="cancelTime > 0"
                            >支付剩余
                            <u-count-down
                                separator="zh"
                                :timestamp="cancelTime"
                                separator-color="#fff"
                                color="#fff"
                                :separator-size="26"
                                :font-size="26"
                                bg-color="transparent"
                                @end="getOrderDetailFun"
                            ></u-count-down>
                            自动关闭
                        </view>
                    </view>
                    <view
                        class="item"
                        v-if="orderDetail.order_status == 1 && !orderDetail.pickup_code"
                    >
                        <view class="white lg m-b-10">等待商家发货</view>
                        <view class="white sm">您的商品正在打包中，请耐心等待…</view>
                    </view>
                    <view
                        class="item"
                        v-if="orderDetail.order_status == 2 && orderDetail.pickup_code"
                    >
                        <view class="white lg m-b-10">待取货</view>
                        <view class="white sm">请前往门店取货</view>
                    </view>
                    <view
                        class="item"
                        v-if="orderDetail.order_status == 2 && !orderDetail.pickup_code"
                    >
                        <view class="white lg m-b-10">已发货</view>
                        <view class="white sm">您的商品正在路中，请耐心等待…</view>
                    </view>
                    <view class="item" v-if="orderDetail.order_status == 3">
                        <view class="white lg m-b-10">已完成</view>
                        <view class="white sm">商品已签收，期待再次购买！</view>
                    </view>
                    <view class="item" v-if="orderDetail.order_status == 4">
                        <view class="white lg m-b-10">订单已关闭</view>
                        <!-- <view class="white sm">原因：超时未支付</view> -->
                    </view>
                </view>
                <view class="address-wrap flex contain" v-if="orderDetail.delivery_type !== 1">
                    <image class="icon-md m-r-20" src="/static/images/icon_address.png"></image>
                    <view v-if="orderDetail.delivery_type == 2" class="address">
                        <view class="lg bold">门店自提点：{{ orderDetail.shop.name }}</view>
                        <view class="m-t-10">
                            {{ orderDetail.shop_address }}
                        </view>
                    </view>
                    <view class="address" v-else>
                        <view>
                            <text class="name md m-r-10">{{ orderDetail.consignee }}</text>
                            <text class="phone md">{{ orderDetail.mobile }}</text>
                            <view class="area sm m-t-10 lighter">{{
                                orderDetail.delivery_address
                            }}</view>
                        </view>
                    </view>
                </view>

                <view class="order-info contain" v-if="showCode">
                    <view class="item flex" style="align-items: flex-start; width: 100%">
                        <view class="xs">
                            <view class="title">门店营业时间</view>
                            <view class="title m-t-10" style="width: 100%">
                                <text
                                    v-for="item in orderDetail.shop.weekdays"
                                    :key="item"
                                    class="m-r-10"
                                    v-show="orderDetail.shop.weekdays.length != 7"
                                    >{{ getWeek(item) }}
                                </text>
                                {{ orderDetail.shop.run_start_time }} ~
                                {{ orderDetail.shop.run_end_time }}
                            </view>
                        </view>

                        <view
                            class="qr-contain"
                            :class="{ 'qr-contain--die': orderDetail.verification_status }"
                            ref="qr-image"
                            style="margin-left: auto"
                            @click="showPopup = true"
                        >
                            <image src="/bundle/static/scen_code.png" class="image-code"></image>
                        </view>
                    </view>
                </view>
                <view class="order-info contain" v-if="team.status_text">
                    <view class="item flex" style="align-items: flex-start">
                        <view class="title">拼购状态</view>
                        <view class="bt">{{ team.status_text }}</view>
                    </view>
                </view>

                <view class="goods contain">
                    <view class="m-l-20">
                        <shop-title :shop="orderDetail.shop"></shop-title>
                    </view>

                    <order-goods
                        :team="team"
                        :link="true"
                        :isJumpGoods="true"
                        :list="orderDetail.order_goods"
                    ></order-goods>
                </view>

                <!-- 虚拟发货内容 -->
                <template v-if="orderDetail.delivery_content">
                    <view class="order-info contain" @click="copy(orderDetail.delivery_content)">
                        <view class="item">
                            <view class="black" style="word-break: break-all">{{
                                orderDetail.delivery_content || '无'
                            }}</view>
                            <view class="flex row-right m-t-30">
                                <view class="copy-btn">复制</view>
                            </view>
                        </view>
                    </view>
                </template>

                <!-- 扫码收货 -->
                <view v-if="orderDetail.delivery_type == 2" class="contain receive">
                    <!-- <view v-if="orderDetail.verification_status" class="delivery--die">
						<u-image src="/static/images/delivery_die.png" width="134" height="98" mode="scaleFill" />
					</view>
				 -->

                    <!-- <view class="receive-qr" v-if="showCode">
                        <text class="xs lighter">请凭二维码取货</text>
                        <view
                            class="m-t-20 qr-contain"
                            :class="{ 'qr-contain--die': orderDetail.verification_status }"
                            ref="qr-image"
                        >
                            <tki-qrcode
                                ref="qrcode"
                                uni="px"
                                :val="orderDetail.pickup_code"
                                :size="118 * 2"
                                :showLoading="false"
                            />
                        </view>
                        <view class="m-t-30 xs black qr-code"
                            >提货码：{{ orderDetail.pickup_code }}</view
                        >
                    </view> -->

                    <!-- <view class="p-30 flex col-top" v-if="showCode">
                        <view style="width: 140rpx" class="bold">店铺地址: </view>
                        <view style="width: 500rpx">
                            {{ orderDetail.shop_address }}
                        </view>
                    </view> -->
                </view>

                <view class="price contain">
                    <view class="flex row-between">
                        <view>商品金额</view>
                        <view class="black">
                            <price-format :price="orderDetail.goods_price"></price-format>
                        </view>
                    </view>
                    <view class="flex row-between">
                        <view>运费</view>
                        <view class="black"
                            >+
                            <price-format :price="orderDetail.shipping_price"></price-format>
                        </view>
                    </view>
                    <view v-if="orderDetail.discount_amount != 0" class="flex row-between">
                        <view>优惠券</view>
                        <view class="primary"
                            >-
                            <price-format :price="orderDetail.discount_amount"></price-format>
                        </view>
                    </view>
                    <view v-if="orderDetail.member_amount" class="flex row-between">
                        <view>会员抵扣</view>
                        <view class="primary"
                            >-
                            <price-format :price="orderDetail.member_amount"></price-format>
                        </view>
                    </view>
                    <view class="flex row-right">
                        <view class="lighter">实付金额：</view>
                        <view class="primary xl">
                            <price-format
                                weight="500"
                                :first-size="34"
                                :second-size="34"
                                :price="orderDetail.order_amount"
                            ></price-format>
                        </view>
                    </view>
                </view>
                <view class="order-info contain">
                    <view class="item flex" style="align-items: flex-start">
                        <view class="title">买家留言</view>
                        <view class="black">{{ orderDetail.user_remark || '无' }}</view>
                    </view>
                </view>
                <view class="order-info contain">
                    <view class="item flex">
                        <view class="title">订单编号</view>
                        <view class="black">{{ orderDetail.order_sn }}</view>
                    </view>
                    <view class="item flex">
                        <view class="title">订单类型</view>
                        <view class="black">{{ orderDetail.order_type }}</view>
                    </view>
                    <view class="item flex">
                        <view class="title">支付方式</view>
                        <view class="black">{{ orderDetail.pay_way }}</view>
                    </view>
                    <view class="item flex">
                        <view class="title">下单时间</view>
                        <view class="black">{{ orderDetail.create_time }}</view>
                    </view>
                    <view v-if="orderDetail.pay_time" class="item flex">
                        <view class="title">付款时间</view>
                        <view class="black">{{ orderDetail.pay_time }}</view>
                    </view>
                    <view v-if="orderDetail.shipping_time" class="item flex">
                        <view class="title">发货时间</view>
                        <view class="black">{{ orderDetail.shipping_time }}</view>
                    </view>
                    <view v-if="orderDetail.confirm_take_time" class="item flex">
                        <view class="title">成交时间</view>
                        <view class="black">{{ orderDetail.confirm_take_time }}</view>
                    </view>
                    <view v-if="orderDetail.cancel_time" class="item flex">
                        <view class="title">关闭时间</view>
                        <view class="black">{{ orderDetail.cancel_time }}</view>
                    </view>
                </view>
                <view
                    class="footer bg-white flex fixed row-right"
                    v-if="
                        orderDetail.cancel_btn ||
                        orderDetail.delivery_btn ||
                        orderDetail.take_btn ||
                        orderDetail.del_btn ||
                        orderDetail.pay_btn ||
                        orderDetail.view_invoice_btn ||
                        orderDetail.save_invoice_btn
                    "
                >
                    <!-- 左侧更多 -->
                    <!-- <view class="more">
                        <view class="flex" v-if="orderDetail.view_invoice_btn || orderDetail.save_invoice_btn" @click="moreStatus=!moreStatus">
                            <text class="m-r-10">更多</text>
                            <u-icon name="arrow-up" size="22"></u-icon>
                        </view>
                        
                        <view class="more-container bg-white" v-show="moreStatus">
                            <navigator v-if="orderDetail.view_invoice_btn" hover-class="none"
                            	:url="'/bundle/pages/invoice_detail/invoice_detail?id=' + orderDetail.id">
                            	<view class="more-item" >查看发票</view>
                            </navigator>
                            
                            <navigator v-if="orderDetail.save_invoice_btn" hover-class="none"
                            	:url="'/bundle/pages/invoice/invoice?shop_id=' + orderDetail.shop.id + '&order_id=' + orderDetail.id + '&type=' + invoiceType">
                            	<view class="more-item">申请开票</view>
                            </navigator>
                        </view>
                    </view> -->
                    <!-- 右侧订单操作按钮组 -->
                    <view class="flex">
                        <view v-if="orderDetail.cancel_btn">
                            <button
                                size="sm"
                                class="plain br60"
                                hover-class="none"
                                @tap="cancelOrder"
                            >
                                取消订单
                            </button>
                        </view>
                        <navigator
                            v-if="orderDetail.view_invoice_btn && orderDetail.shop.open_invoice"
                            hover-class="none"
                            class="m-l-20"
                            :url="
                                '/bundle/pages/invoice_detail/invoice_detail?id=' + orderDetail.id
                            "
                        >
                            <button size="sm" class="plain br60" hover-class="none">
                                查看发票
                            </button>
                        </navigator>
                        <navigator
                            v-if="
                                orderDetail.save_invoice_btn &&
                                orderDetail.shop.open_invoice &&
                                orderDetail.order_status !== 4
                            "
                            hover-class="none"
                            class="m-l-20"
                            :url="
                                '/bundle/pages/invoice/invoice?shop_id=' +
                                orderDetail.shop.id +
                                '&order_id=' +
                                orderDetail.id +
                                '&type=' +
                                invoiceType
                            "
                        >
                            <button size="sm" class="plain br60" hover-class="none">
                                申请开票
                            </button>
                        </navigator>
                        <navigator
                            v-if="orderDetail.delivery_btn"
                            hover-class="none"
                            class="m-l-20"
                            :url="
                                '/bundle/pages/goods_logistics/goods_logistics?id=' + orderDetail.id
                            "
                        >
                            <button size="sm" class="plain br60" hover-class="none">
                                查看物流
                            </button>
                        </navigator>
                        <view v-if="orderDetail.take_btn" class="m-l-20">
                            <button
                                size="sm"
                                class="plain br60 primary red"
                                hover-class="none"
                                @tap.stop="comfirmOrder"
                            >
                                确认收货
                            </button>
                        </view>
                        <view v-if="orderDetail.del_btn" class="m-l-20">
                            <button size="sm" class="plain br60" hover-class="none" @tap="delOrder">
                                删除订单
                            </button>
                        </view>
                        <view
                            class="m-l-20"
                            v-if="orderDetail.pay_btn && orderDetail.pay_way_base != 4"
                        >
                            <button size="sm" class="bg-primary br60 white" @tap="payNow">
                                立即付款
                            </button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <loading-view v-if="isFirstLoading"></loading-view>
        <order-dialog
            ref="orderDialog"
            :orderId="orderDetail.id"
            :type="type"
            @confirm="confirmDialog"
        ></order-dialog>
        <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
        <float-tab></float-tab>
        <u-popup
            v-model="showPopup"
            mode="bottom"
            border-radius="14"
            :closeable="false"
            :safe-area-inset-bottom="true"
            mask-close-able
        >
            <view class="receive-qr">
                <text class="xs lighter">请凭二维码取货</text>
                <view
                    class="m-t-20 qr-container"
                    :class="{ 'qr-contain--die': orderDetail.verification_status }"
                    ref="qr-image"
                >
                    <tki-qrcode
                        v-if="showPopup"
                        ref="qrcode"
                        uni="px"
                        :val="orderDetail.pickup_code"
                        :size="118 * 2"
                        :showLoading="false"
                    />
                </view>
                <view class="m-t-60 xs black qr-code">提货码：{{ orderDetail.pickup_code }}</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    getOrderDetail,
    cancelOrder,
    delOrder,
    confirmOrder,
    getwxReceiveDetail,
    getwechatSyncCheck
} from '@/api/order'
import { copy } from '@/utils/tools.js'
import { invoiceType } from '@/utils/type.js'
import { compareWeChatVersion } from '@/utils/tools'
export default {
    data() {
        return {
            id: '',
            orderDetail: {
                shop: {}
            },
            team: {},
            isFirstLoading: true,
            type: 0,
            cancelTime: 0,
            showCancel: '',
            showLoading: false,
            moreStatus: false, // 更多
            invoiceType: invoiceType['ORDERDETAILADD'],
            showPopup: false
        }
    },

    onLoad(options) {
        const { id } = this.$Route.query
        this.id = id
    },

    onShow() {
        this.moreStatus = false
        this.getOrderDetailFun()
    },
    computed: {
        /**
         * 拼团订单，未拼团成功不显示二维码
         */
        showCode() {
            let type = false
            if (this.orderDetail.order_type == '拼团订单') {
                type = this.orderDetail.team.status != '1' ? false : true
                if (!this.orderDetail.pickup_code) {
                    type = false
                }
            } else {
                type = !!this.orderDetail.pickup_code
            }
            return type
        }
    },
    methods: {
        async confirmDialog() {
            const { type, id } = this
            let res = null
            switch (type) {
                case 0:
                    res = await cancelOrder(id)
                    break

                case 1:
                    res = await delOrder(id)
                    break

                case 2:
                    res = await confirmOrder(id)
                    break
            }
            if (res.code == 1) {
                uni.$emit('refreshorder')

                if ([0, 2].includes(type)) {
                    this.getOrderDetailFun()
                } else if (type == 1) {
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 2000)
                }
            }
        },

        // 打开弹窗
        dialogOpen() {
            this.$refs.orderDialog.open()
        },

        // 删除订单
        delOrder() {
            this.type = 1
            this.$nextTick(() => {
                this.dialogOpen()
            })
        },
        // 小程序确认收货
        comfirmReceive(transaction_id) {
            return new Promise((resolve, reject) => {
                wx.openBusinessView({
                    businessType: 'weappOrderConfirm',
                    extraData: {
                        transaction_id
                    },
                    success({ extraData }) {
                        if (extraData.status == 'success') {
                            resolve('确认收货')
                        } else {
                            resolve('取消收货')
                        }
                    },
                    fail(err) {
                        reject(err)
                    }
                })
            })
        },
        //查询是否收货成功
        querycomfirmReceive(id) {
            return new Promise((resolve, reject) => {
                getwechatSyncCheck({ id })
                    .then(({ data }) => {
                        if (data.order.order_state === 4) {
                            resolve('已确认收货')
                        } else {
                            reject('未确认收货')
                        }
                    })
                    .catch((err) => {
                        reject(err)
                    })
            })
        },

        // 确认订单
        comfirmOrder() {
            this.type = 2
            this.$nextTick(async () => {
                // #ifdef MP-WEIXIN
                //未开启发货管理无需调用小程序同步发货API
                if (!this.$store.state.app.config.mini_express_send_sync) {
                    return this.dialogOpen()
                }
                let res = {}
                if (this.orderDetail.pay_way_base === 1) {
                    res = await getwechatSyncCheck({ id: this.id })
                    console.log(res)
                }
                if (
                    compareWeChatVersion('2.6.0') === 1 &&
                    wx.openBusinessView &&
                    this.orderDetail.pay_way_base === 1 &&
                    res.data.order.order_state !== 1
                ) {
                    try {
                        const { data } = await getwxReceiveDetail({
                            order_id: this.id
                        })
                        await this.comfirmReceive(data.transaction_id)
                        await this.querycomfirmReceive(this.id)
                        await confirmOrder(this.id)
                    } catch (error) {
                        console.log(error)
                    }
                    this.getOrderDetailFun()
                } else {
                    this.dialogOpen()
                }
                // #endif

                // #ifndef MP-WEIXIN
                this.dialogOpen()
                // #endif
            })
        },

        // 取消订单
        cancelOrder() {
            this.type = 0
            this.$nextTick(() => {
                this.dialogOpen()
            })
        },
        //获取营业时间
        getWeek(val) {
            switch (val) {
                case '1':
                    return '周一'
                    break
                case '2':
                    return '周二'
                    break
                case '3':
                    return '周三'
                    break
                case '4':
                    return '周四'
                    break
                case '5':
                    return '周五'
                    break
                case '6':
                    return '周六'
                    break
                case '0':
                    return '周日'
                    break
                default:
                    break
            }
        },
        // 支付
        payNow() {
            uni.$on('payment', (params) => {
                setTimeout(() => {
                    if (params.result) {
                        this.$toast({ title: '支付成功' })
                        this.getOrderDetailFun()
                        uni.$emit('refreshorder')
                        uni.$off('payment')
                    } else {
                        this.$toast({ title: '支付失败' })
                    }
                }, 500)
            })

            uni.navigateTo({
                url: `/pages/payment/payment?from=${'order'}&order_id=${this.id}`
            })
        },

        // 请求订单详情
        getOrderDetailFun() {
            getOrderDetail(this.id).then((res) => {
                console.log(res)
                if (res.code == 1) {
                    this.cancelTime = res.data.order_cancel_time - Date.now() / 1000
                    this.orderDetail = res.data
                    this.team = res.data.team || {}
                    this.$nextTick(() => {
                        this.isFirstLoading = false
                        if (res.data.delivery_type === 2) {
                            const refQR = this.$refs['qrcode']
                            refQR._makeCode()
                        }
                    })
                } else {
                    setTimeout(() => uni.navigateBack(), 1500)
                }
            })
        },

        // 复制内容
        copy(content) {
            copy(content)
        }
    }
}
</script>
<style lang="scss">
.bt {
    width: 100%;
    text-align: right;
}

.order-details {
    position: relative;
    padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.order-details .header-bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 200rpx;
    background-color: $-color-primary;
    z-index: 0;
}

.order-details .goods .status {
    height: 88rpx;
    padding: 0 20rpx;
}

.order-details .main {
    position: relative;
    z-index: 1;
}

.order-details .contain {
    margin: 0 20rpx 20rpx;
    border-radius: 14rpx;
    background-color: #fff;
}

.order-details .header {
    padding: 24rpx 40rpx;
    box-sizing: border-box;
}

.order-details .img-line {
    height: 1.5px;
    width: 100%;
    display: block;
}

.order-details .address-wrap {
    height: 164rpx;
    padding: 0 24rpx;
}

.order-details .order-info {
    padding: 12rpx 0;
}

.order-details .order-info .item {
    padding: 12rpx 24rpx;
}

.order-details .order-info .copy-btn {
    font-size: 24rpx;
    padding: 6rpx 18rpx;
    border-radius: 8rpx;
    color: $-color-primary;
    background: rgba($color: $-color-primary, $alpha: 0.1);
}

.order-details .order-info .item .title {
    width: 180rpx;
    flex: none;
}

.receive-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 460rpx;
}

.qr-contain {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    // width: 140px;
    // height: 140px;
    // padding: 8px;
    // border: 1px solid #CCCCCC;
    border-radius: 5px;
}
.qr-container {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 140px;
    padding: 8px;
    // border: 1px solid #CCCCCC;
    border-radius: 5px;
}
.qr-contain--die {
    position: relative;
}

.qr-contain--die::before {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    content: '';
    background-color: rgba(255, 255, 255, 0.5);
}

.qr-code {
    padding: 8rpx 30rpx;
    border-radius: 60px;
    background-color: #f6f6f6;
}

.order-details .price > view {
    height: 60rpx;
    padding: 0 24rpx;
}

.order-details .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    padding: 0 24rpx;
    box-sizing: content-box;
    padding-bottom: env(safe-area-inset-bottom);
}

.footer .plain {
    border: 1px solid #bbbbbb;
}

.footer .plain.red {
    border: 1px solid $-color-primary;
}

.tips-dialog {
    height: 230rpx;
    width: 100%;
}

.order-details .invite-btn {
    background: linear-gradient(270deg, #ff2c3c 0%, #f95f2f 100%);
    margin: 30rpx 26rpx 40rpx;
}
.image-code {
    width: 72rpx;
    height: 72rpx;
}
// 点击更多
.more {
    position: relative;
    .more-container {
        width: 200rpx;
        bottom: 70rpx;
        left: -20rpx;
        position: absolute;
        border: 1px solid #e9e9e9;
        .more-item {
            padding: 10rpx 20rpx;
            text-align: center;
            border-top: 1px solid #e9e9e9;
        }
        .more-item:first-child {
            border-top: 0;
        }
    }
}
</style>
